<!DOCTYPE html>
<html lang="sr">
<head>
    <title>SKYBOARD Lokacije</title>
    <meta charset="utf-8">
    
    <?= $this->Html->script('jquery-2.0.0.min') ?>
    <?= $this->Html->script('jquery-ui-1.10.3.min') ?>
    
    <?= $this->Html->script('script') ?>
    
    <style type="text/css">
        *{margin:0;padding:0}
        body,html{height:100%}
        body {background:#ccc;font:14px Tahoma,Arial}
        
        #sidebar{width:200px;height:600px;background:#fff;float:left}
        #showcase {width:800px;height:600px;background:#555;float:left;position:relative}
        #showcase .big{width:100%;height:100%;overflow:hidden;float:left;text-align:center}
        #showcase .big img{/*cursor:pointer*/}
        #showcase ul{width:780px;display:block;position:absolute;left:5px;bottom:5px;padding:5px;background:rgba(255,255,255,0.3);box-shadow:0 0 3px #000}
        #showcase li{display:block;float:left;cursor:pointer;margin-right:5px;border:1px solid #fff}
        #showcase li:last-child{margin-right:0}
        table{width:100%;border-collapse:collapse}
        table .location-row{cursor:pointer}
        th{background:#ccc;color:#fff;padding:10px 5px}
        td{padding:5px}
        .odd td{background:#eee}
        tr:hover td,tr.selected td{background:#13A2EF;color:#fff}
        
        .ui-widget-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.8}
        .ui-dialog-title{display:none}
        .ui-dialog{padding:10px;background:#fff}
        .ui-dialog-titlebar-close{position:absolute;right:20px;top:20px;
                                  background:rgba(255,255,255,0.75);border:none;cursor:pointer;
                                  color:#555;box-shadow:0 0 5px #000;font-weight:bolder}
                                  
        .select-box{position:relative;width:190px;line-height:20px;height:20px;margin:5px;cursor:pointer}
        .select-box > .selected{width:180px;height:20px;padding:2px 5px;border:1px solid #ccc;border-radius:12px;position:absolute;z-index:1;background:#fff}
        .select-box.opened > .selected{border-radius:12px 12px 0 0;border:none;padding:4px 5px 0;color:#ccc}
        .select-box ol,.select-box:hover ol{
            position:absolute;
            z-index:0;
            width:192px;
            left:0;
            top:0;
            display:none;
            background:#fff;
            color:#000;
            list-style:none;
            box-shadow:0 0 5px #777;
            padding:28px 0 10px 0;
            border-radius:12px
        }
        .select-box li{padding:2px 7px}
        .select-box li.selected,.select-box li.selected:hover{background:#077CBA;color:#fff}
        .select-box li:hover{background:#dedede}
        .select-box .arrow{position:absolute;z-index:2;width:16px;height:16px;right:5px;top:5px;background:url(../img/select-box-arrow.png) no-repeat 0 0}
        
        #location-info{margin:20px 10px}
        #location-info p,#location-info .paragraph{margin:0 0 10px;font-size:12px;color:#777;line-height:18px}
        #location-info p strong{font-size:16px;color:#555;margin-left:10px;display:inline-block}
        #location-info ul{padding-left:14px;margin-top:0;list-style:none}
        #location-info li{font-size:14px;color:#555;font-weight:bolder}
        #location-info li .dimensions{font-weight:normal;font-size:11px;display:block;margin-bottom:5px}
    </style>
    
    <script type="text/javascript">
        $(function(){
            initSelectBox();
            
            if ($('#showcase ul li').length) {
                setTimeout(function(){
                    $('#showcase ul').fadeOut('slow')
                }, 2000);
            }else{
                $('#showcase ul').hide();
            }
            $('#showcase').mouseenter(function(){
                if ($('#showcase ul li').length) {
                    $('#showcase ul').fadeIn('fast');
                }
            });
            $('#showcase').mouseleave(function(){
                if ($('#showcase ul li').length) {
                    $('#showcase ul').fadeOut('fast');
                }
            })
        });
    
        var locations = <?= json_encode(Set::combine($locations, "{n}.Location.id", "{n}")) ?>;
        function Show(id) {
            var l = locations[id] 
            if (l) {
                var location = l.Location;
                var ad_type  = l.AdType;
                var images   = l.LocationImage;
                
                var tr = $('#location-' + location.id);
                $('tr').removeClass('selected');
                tr.addClass('selected');
                
                LoadImages(images);
                UpdateLocationInfo(l);
            }
        }
        
        function UpdateLocationInfo(data) {
            var info = $('#location-info');
            
            info.empty();
            
            var adTypes = [], at, lat;
            for (var i=0; i<data.AdType.length; i++) {
                at  = data.AdType[i];
                lat = data.LocationsAdType[i];
                adTypes.push(at.name + 
                             ' <span class="dimensions">' + lat.width +
                             ' x ' + lat.height +
                             ' <?= LENGTH_SYM ?></span>');
            }
            
            var price = parseFloat(data.Location.rent_price) + parseFloat(data.Location.price)
            info.append('<p>Adresa:<br><strong>' + data.Location.address + '</strong></p>');
            info.append('<div class="paragraph">Reklame:<ul><li>' + adTypes.join('</li><li>') + '</li></ul></div>');
            info.append('<p>Cena:<br><strong>' + currency_format(price) + ' <?= CURRENCY_SYM ?></strong></p>');
        }
        
        function ImageLoaded(img, func) {
            if (img[0].complete) {
                func(img);
            } else {
                setTimeout(function(){
                    ImageLoaded(img, func);
                }, 500);
            }
        }
        
        function LoadImages(images) {
            var big = $('#showcase .big img');
            if (! big.length) {
                big = $('<img>').appendTo('#showcase .big');
                big.click(function(){
                    /*var src = $(this).attr('src').replace(/\?.*?$/, '');
                    var img = $('<img>').attr('src', src);
                    ImageLoaded(img, function(img){
                        var w = img[0].width;
                        img.dialog({
                            width: w,
                            title: false,
                            modal:true,
                            closeText: 'Zatvori',
                            open: function() {
                                img[0].focus();
                            }
                        });
                    });*/
                });
            }
            var ul = $('#showcase ul');
            big.attr('src', '');
            ul.empty();
            
            var bigWidth    = $('#showcase .big').width();
            var bigHeight   = $('#showcase .big').height();
            var smallWidth  = 100;
            var smallHeight = 75;
            
            if (images.length) {
                big.attr('src', '/img/locations/' + images[0].location_id + '/' 
                                                  + images[0].image 
                                                  + '?w=' + bigWidth
                                                  + '&h=' + bigHeight );
                
                var im, img, li;
                for (x in images) {
                    img = images[x];
                    
                    li = $('<li>').appendTo(ul);
                    im = $('<img>').appendTo(li);
                    im
                        .attr('src', '/img/locations/' + img.location_id + '/'
                                                     + img.image
                                                     + '?h=' + smallHeight )
                        .click(function(){
                            var src = $(this).attr('src').replace(/\?.*?$/, '');
                            $('#showcase .big img').attr('src', src + '?w=' + bigWidth +
                                                                      '&h=' + bigHeight )
                        });
                }
            }
        }
        
        function initSelectBox() {
            var sb    = $('.select-box');
            var sel   = sb.children('.selected');
            var ol    = sb.children('ol');
            var selLi = ol.children('li.selected');
            if (! selLi.length) {
                if (location.href.indexOf("#")>0) {
                    var locId = parseInt(location.href.substr(location.href.indexOf("#")+1).replace(/location-/,''));
                    selLi = ol.children('li[value='+locId+']');
                    selLi.addClass('selected');
                } else {
                    selLi = ol.children('li').eq(0);
                    selLi.addClass('selected');
                }
            }
            sel.html(selLi.text());
            
            sb.click(function(){
                if (ol.is(':visible')) {
                    ol.fadeOut('fast');
                    sb.removeClass('opened');
                } else {
                    ol.fadeIn('fast');
                    sb.addClass('opened');
                }
                return false;
            })
            
            ol.children('li').click(function(){
                ol.children('li').removeClass('selected');
                $(this).addClass('selected');
                sel.html($(this).text());
                
                var id = $(this).val();
                Show(id);
                location.href = '#location-' + id;
            });
            
            $(document.body).click(function(){
                ol.fadeOut('fast');
                sb.removeClass('opened');
            });
            
            Show(ol.children('.selected').val());
        }
    </script>
</head>

<body>
    <div id="showcase">
        <div class="big"></div>
        <ul></ul>
    </div>
    <div id="sidebar">
        <div class="select-box">
            <span class="arrow"></span>
            <span class="selected"></span>
            <ol>
            <? foreach ($locations as $location): ?>
            <? 
                $locationId = $location['Location']['id'];
                $locationName = $location['Location']['name']
            ?>
                
                <li value="<?= $locationId ?>"><?= $locationName ?></li>
            <? endforeach ?>
            </ol>
        </div>
        
        <div id="location-info">
            
        </div>
    </div>
</body>
</html>
